<template>
  <div id="app" style="font-size: 26px; font-weght: bold; padding: 30px">
    <!-- {{ $store.state.asyncRouter }} -->
    <div class="head">
      <!-- <el-card class="box-card" style="width: 100%">
        <div>
          <ul class="bianjieEvery">
            <li
              class="bianjiLi"
              v-for="(item, index) in caozuoList"
              :key="index"
            >
              <p class="detailCount">{{ item.todayCount.count }}</p>
              <div class="center">
                <div class="left">
                  <span class="span">{{ item.text }}</span>

                  <span class="span"
                    >较昨日{{ item.todayCount.type == 2 ? "-" : "+"
                    }}{{ item.todayCount.data }}</span
                  >
                </div>
                <i class="icon" :class="item.icon"></i>
              </div>
            </li>
          </ul>
        </div>
      </el-card> -->
      <div class="box-card" style="width: 100%">
        <div>
          <ul class="bianjieEvery">
            <li
              class="bianjiLi"
              v-for="(item, index) in caozuoList"
              :key="index"
            >
              <div class="center">
                <div class="left">
                  <span>{{ item.text }}</span>
                  <div class="unitBox">
                    <span class="span">{{ item.todayCount }}</span
                    >{{ item.unit }}
                  </div>
                  <!-- <span class="span">{{
                    item.yesterday + " " + item.yesterdayCount
                  }}</span> -->
                  <span>{{ item.yesterday }}</span>
                  <div class="biteBox">
                    <div class="yesterdayBox" style="display: flex">
                      <span class="span"> {{ item.yesterdayCount }}</span
                      >{{ item.unit }}
                    </div>
                    <el-image :src="item.imgSrc"></el-image>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div class="cardOutBox">
      <!-- 待处理订单 -->
      <el-card class="box-card">
        <p class="p1">未处理订单</p>
        <div class="fenLei">
          <div class="tuiKuan" @click="goto(1)">
            <span class="span">退款订单</span>
            <span class="span">{{ tuikuan }}</span>
          </div>
          <div class="tuiKuan" @click="goto(4)">
            <span class="span">售后单</span>
            <span class="span">{{ tuihuan }}</span>
          </div>
          <!-- <div class="huanHuo" @click="goto(3)">
            <span class="span">换货订单</span>
            <span class="span">{{ huanhuo }}</span>
          </div>
          <div class="tuiHuan" @click="goto(2)">
            <span class="span">退款退货订单</span>
            <span class="span">{{ tuihuan }}</span>
          </div> -->
        </div>
      </el-card>
      <!-- 订单统计折线图 -->
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <!-- <span class="title">待处理订单</span> -->
        </div>
        <!--        <div style="margin: 10px 0">-->
        <!--          <el-radio-group v-model="radio2" size="medium">-->
        <!--            <el-radio-button label="上海" ></el-radio-button>-->
        <!--            <el-radio-button label="北京"></el-radio-button>-->
        <!--            <el-radio-button label="广州"></el-radio-button>-->
        <!--            <el-radio-button label="深圳"></el-radio-button>-->
        <!--          </el-radio-group>-->
        <!--        </div>-->
        <div>
          <div id="EChart" style="width: 100%; height: 300px"></div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { getOrder, getUser } from "../utils/api";
import { getMainData, getMainDatas } from "../utils/main";
export default {
  components: {},
  data() {
    return {
      tuikuan: "",
      huanhuo: "",
      tuihuan: "",
      orderxAxis: {},
      orderLegend: {},
      orderSeries: {},
      orderLoading: false,
      menberxAxis: {},
      menberLegend: {},
      menberSeries: {},
      // caozuoList: [
      //   {
      //     icon: "el-icon-s-order",
      //     text: "今日支付订单数",
      //     todayCount: "",
      //     type: 1,
      //   },
      //   {
      //     icon: "el-icon-s-check",
      //     text: "今日支付人数",
      //     todayCount: "",
      //     type: 1,
      //   },
      //   {
      //     icon: "el-icon-coin",
      //     text: "今日支付金额",
      //     todayCount: "",
      //     type: 1,
      //   },
      //   {
      //     icon: "el-icon-s-marketing",
      //     text: "今日新增用户",
      //     todayCount: "",
      //     type: 1,
      //   },
      // ],
      caozuoList: [
        {
          icon: "el-icon-s-order",
          text: "今日支付订单数",
          yesterday: "昨日支付订单数",
          todayCount: "",
          yesterdayCount: "",
          rate: "",
          unit: "单",
          imgSrc: require("../assets/image/firstPageImg/Frame 2801.png"),
        },
        {
          icon: "el-icon-s-check",
          text: "今日支付人数",
          yesterday: "昨日支付人数",
          todayCount: "",
          yesterdayCount: "",
          rate: "",
          unit: "人",
          imgSrc: require("../assets/image/firstPageImg/Frame.png"),
        },
        {
          icon: "el-icon-coin",
          text: "今日支付金额",
          yesterday: "昨日支付金额",
          todayCount: "",
          yesterdayCount: "",
          rate: "",
          unit: "元",
          imgSrc: require("../assets/image/firstPageImg/Frame (1).png"),
        },
        {
          icon: "el-icon-set-up",
          text: "今日新增用户",
          yesterday: "昨日新增用户",
          todayCount: "",
          yesterdayCount: "",
          rate: "人",
          unit: "人",
          imgSrc: require("../assets/image/firstPageImg/Frame (2).png"),
        },
      ],
      radio2: "上海",
      token: sessionStorage.getItem("token"),
    };
  },
  methods: {
    getList() {
      getMainData(this.token).then((res) => {
        if (res.data.status) {
          let Listdata = res.data.data;
          // let index = 0;
          // for (let k in Listdata) {
          //   this.caozuoList[index].todayCount = Listdata[k];
          //   index++;
          // }
          // 支付订单数
          this.caozuoList[0].todayCount = Listdata.order_apy.order_pay_today;
          this.caozuoList[0].yesterdayCount =
            Listdata.order_apy.order_pay_yesterday;
          // 支付人数
          this.caozuoList[1].todayCount = Listdata.user_pay.count;
          this.caozuoList[1].yesterdayCount =
            Listdata.user_pay.user_pay_yesterday;
          // 支付额
          this.caozuoList[2].todayCount = Listdata.price_pay.price_pay_today;
          this.caozuoList[2].yesterdayCount =
            Listdata.price_pay.price_pay_yesterday;
          // 新增用户
          this.caozuoList[3].todayCount = Listdata.new_user.user_today;
          this.caozuoList[3].yesterdayCount = Listdata.new_user.user_yesterday;
          // console.log("555", this.caozuoList);
        }
      });
    },
    getCount() {
      getMainDatas(this.token).then((res) => {
        if (res.data.status) {
          let Countdata = res.data.data;
          // console.log(99, Countdata);
          this.tuikuan = Countdata.Refund;
          // this.huanhuo = Countdata.change;
          this.tuihuan = Countdata.reship;

          // console.log(this.Countdata, 111);
          // let index = 0;
          // for (let k in Countdata) {
          //   this.caozuoList[index].todayCount = Listdata[k];
          //   index++;
          // }
          // console.log("555", this.caozuoList);
        }
      });
    },
    goto(i) {
      // this.$router.push(`/Index/backlog?type=${i}`);
      if (i == 1) {
        this.$router.push(`/exitOrder`);
      } else if (i == 4) {
        this.$router.push(`/Index/shouhou`);
      }
      //  else if (i == 2) {
      //   this.$router.push(`/Index/returnGoods`);
      // } else if (i == 3) {
      //   this.$router.push(`/Index/huanhuo`);
      // }
    },
    getOrder() {
      getOrder(this.token)
        .then((res) => {
          if (res.data.status) {
            this.orderxAxis = res.data.data.xAxis[0];
            console.log(this.orderxAxis);
            this.orderLegend = res.data.data.legend;
            this.orderSeries = res.data.data.series;
            this.orderSeries.push({
              data: this.orderSeries[0].data,
              type: "line",
              // 拐点大小
              symbolSize: 0,
              // 折线颜色
              lineStyle: { color: "#FF9A2E" },
              // 拐点颜色
              itemStyle: {
                borderColor: "#FF9A2E", //拐点正常情况的颜色
                opacity: 0, //正常情况下，不显示拐点
              },
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(255, 154, 46, 1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(255, 154, 46, 0)",
                  },
                ]),
              },
            });
            console.log("this.orderSeries", this.orderSeries);
            this.getRenderer();
          } else if ((res.data.data.message = "请重新登录")) {
            this.$router.push("/login");
          }
        })
        .catch((err) => {
          if (err.message == "Network Error") {
            this.$message.error("网络错误，请重新链接");
          } else if ((res.data.data.message = "请重新登录")) {
            this.$router.push("/login");
          } else {
            this.$message.error("请求失败");
          }
        });
    },
    // getUser() {
    //   getUser(this.token)
    //     .then((res) => {
    //       if (res.data.status) {
    //         console.log(res.data.data);
    //         this.menberxAxis = res.data.data.xAxis[0];
    //         this.menberLegend = res.data.data.legend;
    //         this.menberSeries = res.data.data.series;
    //         // this.getMenber();
    //       } else if ((res.data.data.message = "请重新登录")) {
    //         this.$router.push("/login");
    //       }
    //     })
    //     .catch((err) => {
    //       if (err.message == "Network Error") {
    //         this.$message.error("网络错误，请重新链接");
    //       } else if ((res.data.data.message = "请重新登录")) {
    //         this.$router.push("/login");
    //       } else {
    //         // this.$message.error('请求失败')
    //         console.log(err);
    //       }
    //     });
    // },
    getRenderer() {
      // 基于准备好的dom，初始化echarts实例
      let EChart = this.$echarts.init(document.getElementById("EChart"));
      // 配置参数
      let config = {
        title: { text: "最近7天订单量统计" },
        tooltip: {
          trigger: "axis",
        },
        xAxis: this.orderxAxis,
        yAxis: {},
        legend: this.orderLegend,
        toolbox: {
          feature: {
            saveAsImage: {}, //保存为图片
          },
        },
        series: this.orderSeries[1],
      };
      // 设置参数
      EChart.setOption(config);
    },
    // getMenber() {
    //   let EChart = this.$echarts.init(document.getElementById("menber"));
    //   let config = {
    //     tooltip: {
    //       trigger: "axis",
    //     },
    //     xAxis: this.menberxAxis,
    //     yAxis: {},
    //     legend: this.menberLegend,
    //     toolbox: {
    //       feature: {
    //         saveAsImage: {}, //保存为图片
    //       },
    //     },
    //     series: this.menberSeries,
    //   };
    //   EChart.setOption(config);
    // },
    // router(e) {
    //   this.$router.push(e);
    // },
    getSocketData(res) {
      console.log(res);
      if (res.detail.data === "success" || res.detail.data === "heartBath")
        return;
    },
    // todetail() {
    //   this.$router.push("/login");
    // },
  },

  mounted() {
    this.getOrder();

    // this.getUser();
    this.getList();
    this.getCount();

    // 在生命周期中调用 getRenderer 方法
  },
  created() {},
};
</script>
<style scoped>
a {
  color: #333;
  text-decoration: none;
}

.text {
  font-size: 14px;
}

#app {
  width: 100%;
  overflow: scroll;
}

#app::-webkit-scrollbar {
  display: none;
}

.head {
  width: 100%;
  margin: 20px 0;
  display: flex;
  justify-content: space-between;
}

.cardOutBox .box-card {
  width: 49%;
  height: 400px;
}

.clearfix .title {
  font-size: 15px;
}

.cardOutBox {
  margin: 20px 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.box-card .el-card__header {
  padding: 10px 20px;
}

.cardOutBox .box-card {
  width: 49%;
  height: 360px;
}

.box-card .p1 {
  font-weight: 700;
  margin-left: 10px;
  padding-bottom: 25px;
  border-bottom: 1px solid #666;
}

.box-card .fenLei {
  display: flex;
  justify-content: space-around;
  margin-top: 40px;
}

.fenLei div {
  /* width: 30%; */
  height: 80px;
  /* border: 1px solid black; */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.tuiKuan,
.huanHuo,
.tuiHuan {
  cursor: pointer;
}
/* ================================= */

.bianjieEvery,
.daibanEvery {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.daibanLi {
  cursor: pointer;
  width: 50%;
  list-style: none;
  transition: 0.3s;
}
.bianjieEvery .bianjiLi {
  cursor: pointer;
  padding: 20px;
  width: 23%;
  height: 192px;
  /* border: 1px solid #838383; */
  box-shadow: 1px 1px 3px #cecdcd;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  list-style: none;
  /* transition: 0.3s; */
  overflow: hidden;
  border-radius: 8px;
}
.bianjiLi .center {
  width: 100%;
  font-size: 18px;
  color: #86909c;
  /* height: 90px; */
  display: flex;
  flex-direction: row;
  /* justify-content: space-between; */
}
.center .unitBox {
  display: flex;
  height: 48px;
  align-items: center;
}
.center .biteBox {
  display: flex;
  height: 54px;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
}
.yesterdayBox {
  display: flex;
  align-items: center;
}
.biteBox .el-image {
  width: 54px;
  height: 54px;
}
.center .left {
  width: 100%;
}
.bianjieEvery .bianjiLi:hover,
.daibanLi:hover {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.bianjiLi a {
  display: block;
  width: 90%;
}
.bianjiLi .icon {
  width: 20%;
  display: block;
  text-align: center;
  height: 100%;
  line-height: 90px;
  border-radius: 2px;
  font-size: 30px !important;
  background-color: #f8f8f8;
  color: #333;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
}
.left .span {
  display: block;
  color: #f96422;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  font-size: 20px;
  font-size: 32px;
}

/* ============================ */
</style>
